
//
// 待办任务
//
<template>
  <div class="saleSummaryReport_main main_container">
    <div class="saleSummaryReport_header">
      <div>待办任务</div>
    </div>
    <el-tabs v-model="activeName" class="saleSummaryReport_tab" tab-position="left" @tab-click="tabClick">
      <el-tab-pane name="2"><span slot="label" class="backlogCheckMatter_text1">待审批<el-badge :value="backlog" /></span><backlogCheckMatter /></el-tab-pane>
      <el-tab-pane name="4"><span slot="label" class="backlogCheckMatter_text">待处理工单<el-badge :value="backBusiness" /></span> <backlogDisposeWorkOrder /></el-tab-pane>
      <el-tab-pane name="0"><span slot="label" class="information_text">消息<el-badge :value="information" /></span><information ref="informationData" /></el-tab-pane>
      <el-tab-pane name="1"><span slot="label" class="information_text">公告<el-badge :value="notice" /></span><announcement /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import announcement from './components/announcement' // 公告
import backlogDisposeWorkOrder from './components/backlogDisposeWorkOrder' // 待处理工单
import backlogCheckMatter from './components/backlogCheckMatter' // 待审批事项
import information from './components/information' // 消息
import { getMsgNum } from '@/api/backlogTask/backlogTask'
import { mapGetters } from 'vuex'

export default {
  name: 'Index',
  components: {
    announcement, backlogDisposeWorkOrder, backlogCheckMatter, information
  },
  computed: {
    ...mapGetters([
      'userId', 'notificationChangeTag', 'notificationId'
    ])
  },
  watch: {
    notificationChangeTag() {
      this.getInfoMsgNum()
    },
    notificationId(newValue, oldValue) {
      if (newValue !== oldValue && newValue !== 0 && this.$store.state.notification.notificationStatus == '1') {
        this.activeName = '0'
        this.$refs.informationData.approverInstall(this.$store.state.order.informationData)
        this.$store.state.order.informationData = ''
        this.$store.state.order.contendId = ''
        this.$store.state.notification.notificationStatus = ''
      }
    }
  },
  data() {
    return {
      information: '',
      notice: '',
      backBusiness: '',
      backlog: '',
      activeName: '2',
      activeName2: '2'
    }
  },
  mounted() {
    this.getInfoMsgNum()
    if (this.$store.state.notification.notificationStatus && this.$store.state.notification.notificationStatus == '公告') {
      this.activeName = '1'
    }
  },
  methods: {
    getInfoMsgNum() {
      getMsgNum(this.userId).then(res => {
        this.information = res.data.information.num
        if (this.information == '0') {
          this.information = ''
        }
        this.notice = res.data.notice.num
        if (this.notice == '0') {
          this.notice = ''
        }
        this.backlog = res.data.backlog.num
        if (this.backlog == '0') {
          this.backlog = ''
        }
        this.backBusiness = res.data.backBusiness.num
        if (this.backBusiness == '0') {
          this.backBusiness = ''
        }
        if (this.information || this.notice || this.backlog || this.backBusiness) {
          this.$store.state.notification.notificationNum_NavMenu = 1
        } else {
          this.$store.state.notification.notificationNum_NavMenu = 0
        }
      })
    },
    tabClick(data) {
      // 切换标签时，重新获取数据
      data.$children[0].getList()
    }
  }
}
</script>

<style lang="less" scoped>
.tabs_content{
  margin-left: 150px;
  /deep/.el-tabs__header{
    overflow: hidden;
    background-color: #F7F8FA;
    height: 40px;
    margin: 0;
  }
}
/deep/.el-badge__content{
  width: 30px;
}
.saleSummaryReport_header{
  width: 500px;height: 50px;
  display: flex;align-items: center;
  margin-left: 20px;
  font-size: 14px !important;
  color: #333 !important;
  line-height: unset !important;
}
.saleSummaryReport_tab{
  height: calc(100% - 50px);
  margin-left: 20px;
  overflow: revert;
  .backlogCheckMatter_text {
        width: 90px ;
    display: inline-block;
    /deep/ .el-badge {
      margin-left: 24px;
      top: 5px;
    }
  }
  .backlogCheckMatter_text1 {
    width: 90px ;
    display: inline-block;
    /deep/ .el-badge {
      margin-left:50.5px;
      top: 5px;
    }
  }
  .information_text {
        width: 90px ;
    display: inline-block;
    /deep/ .el-badge {
      margin-left: 65px;
      top: 5px;
    }
  }
  /deep/ .el-tabs__nav-wrap {
    background-color: white;
    height: calc(100% - 50px);
    width: 150px;
    .el-tabs__active-bar {
      display: unset;
    }

    .el-tabs__item{
      text-align: left;
    }
    .el-tabs__item:hover{
      color: #387bfc !important;
    }
    .el-tabs__item.is-active{
      color: #387bfc;
    }
    .el-tabs__active-bar{
      background-color: #387bfc;
    }

  }
  /deep/ .el-tabs__content{
    overflow: revert;height: 100%;
    .el-tab-pane{
      height: 100%;
    }
    .main_header{
      position: absolute;
      top: -50px;
      right: 0;
    }
    .main_main{
      height: calc(100% - 50px);
      margin-left: 10px;
    }
  }

  /deep/ .el-table__footer-wrapper tbody td.el-table__cell{
    background-color: rgba(0,0,0,0);
  }
  /deep/ .el-table__footer-wrapper tbody td.el-table__cell{
    background-color: transparent!important;
  }
  /deep/ .el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
    border-bottom: 1px solid #dfe6ec;
  }
  /deep/ .el-table--border th.el-table__cell{
    border: none;
  }
}
</style>
